<template>
  <div v-loading="loading" class="wf-table-wrapper" :style="style">
    <div class="wf-table-content">
      <el-table
        class="wf-table"
        :data="list"
        stripe
        height="100%"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <slot />
        <div slot="empty" class="wf-table-empty">
          <div class="wf-table-empty-img-box">
            <img src="@/assets/img/org-search-empty.png" alt="" />
          </div>
          <div class="wf-table-empty-text">{{ empty }}</div>
        </div>
      </el-table>
    </div>
    <div class="wf-table-footer">
      <pagination :current="current" :size="size" :total="total" @on-change="onPageChange" />
    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';

  export default {
    name: 'WfElTable',
    components: {
      Pagination,
    },
    props: {
      emptyText: {
        type: String,
        default: '',
      },
      list: {
        type: Array,
        default() {
          return [];
        },
      },
      size: {
        type: Number,
        default: 10,
      },
      height: {
        type: String,
        default: '500px',
      },
      total: {
        type: Number,
        default: 0,
      },
      current: {
        type: Number,
        default: 1,
      },
      loading: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      empty() {
        return this.emptyText || '暂无数据';
      },
      style() {
        return {
          height: this.height,
        };
      },
    },
    // watch: {},
    // mounted() {},
    methods: {
      onPageChange(data) {
        this.$emit('on-page-change', data);
      },
      handleSelectionChange(data) {
        this.$emit('selection-change', data);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .wf-table-wrapper {
    overflow: hidden;
    border-radius: 5px;
  }
  .wf-table-content {
    height: calc(100% - 70px);
    padding-top: 15px;
    background: #ffffff;
  }
  // .wf-table {
  //   margin-top: 0;
  // }
  .wf-table-empty {
    margin: 0 auto;
    text-align: center;
    height: 100%;
    background: #ffffff;
  }
  // .wf-table-empty-img-box {
  //   padding-top: 100px;
  // }
  .wf-table-empty-text {
    color: #ababae;
  }
</style>
